<template>
  <j-modal
    :title="title"
    :width="600"
    :visible="visible"
    :maskClosable="false"
    @close="close"
    cancelText="关闭"
  >
    <div style="margin: 0 auto">
      <a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item v-if="isAdd" label="上级节点">
          <a-input v-model="model.parentName" disabled></a-input>
        </a-form-model-item>
        <a-form-model-item label="节点名称">
          <a-input v-model="model.name"></a-input>
        </a-form-model-item>
      </a-form-model>
    </div>
    <!-- table区域-end -->
  </j-modal>
</template>
<script>
  import {httpAction, getAction} from '@/api/manage'

  export default {
    name: 'addTreeNode',
    props: ['templateId'],
    components: {},
    data() {
      return {
        isAdd: true,
        labelCol: {span: 4},
        wrapperCol: {span: 18},
        title: '添加节点',
        visible: false,
        model: {},
        url: {
          add: "/sjxmzygl/sjProjectTemplateTreeFa/add",
          edit: "/sjxmzygl/sjProjectTemplateTreeFa/edit",
        },
      }
    },
    created() {
    },
    methods: {
      add(record) {
        if (record === 'root') {
          this.model = {
            ztfaId: this.templateId
          }
        } else {
          this.model = {
            parentName: record.name,
            pid: record.id,
            ztfaId: this.templateId
          }
        }
        this.isAdd = true
        this.visible = true
      },
      edit(record) {
        debugger
        this.model = {
          name: record.name,
          id: record.jid,
        }
        this.isAdd = false
        this.visible = true
      },
      close(isSubmit) {
        if (isSubmit) {
          this.saveData()
        } else {
          this.visible = false
        }
      },
      saveData() {
        let url, type
        if (!this.model.id) {
          url = this.url.add
          type = 'post'
        } else {
          url = this.url.edit
          type = 'put'
        }
        httpAction(url, {templateId: this.templateId, ...this.model}, type).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.$emit('ok')
            this.visible = false
          } else {
            this.$message.error(res.message);
          }
        })
      }
    },
  }
</script>

<style lang="less" scoped>

  .name-type {
    width: 110px;
    margin-left: 5px;
    border: 1px solid #e0e0e0;

    /deep/ .ant-select-selection {
      box-sizing: border-box;
      min-height: 27px !important;

      .ant-select-selection__rendered {
        line-height: 27px !important;
      }
    }
  }
</style>
